<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Table Zebra Stripes effect with jQuery, par Mkyong - http://www.mkyong.com</title>
	<script type="text/javascript" src="../jquery-1.11.0.js"></script>
</head>

<style type="text/css">
	body,td {
		font-size: 10pt;
	}
	
	table {
		background-color: black;
		border: 1px black solid;
		border-collapse: collapse;
	}
	
	th {
		border: 1px outset silver;
		background-color: maroon;
		color: white;
	}
	
	tr {
		background-color: white;
		margin: 1px;
	}
	
	tr.striped {
		background-color: coral;
	}
	
	td {
		padding: 1px 8px;
	}
</style>

<body>
	<script type="text/javascript">
		$(document).ready(function() {
			$("table tr:nth-child(even)").addClass("striped");
		});
	</script>
	<h1>Table Zebra Stripes effect with jQuery</h1>
	<table>
      <tr>
        <th>ID</th>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Apple</td>
        <td>0.60</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Orange</td>
        <td>0.50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Banana</td>
        <td>0.10</td>
      </tr>
      <tr>
        <td>4</td>
        <td>strawberry</td>
        <td>0.05</td>
      </tr>
      <tr>
        <td>5</td>
        <td>carrot</td>
        <td>0.10</td>
      </tr>
    </table>
	<br><a href="index.jsp">retour</a>
</body>
</html>